import React, { useEffect, useRef, useState } from 'react'
import { useImmer } from 'use-immer'
import * as echarts from 'echarts'
import styles from './index.module.scss'
import Title from '@/components/Title'

export default function MapRiskWarning({ res }) {

    useEffect(() => {
        setEvaluationOptionRatio(draft => {
            draft.series[0].data = [res?.moca?.reduce((prev, current) => prev + current.num, 0) / res?.total * 100]
            draft.series[1].data = [100]
            return draft
        })

        setTrainOptionRatio(draft => {
            draft.series[0].data = [res?.total_xl / res?.total * 100]
            draft.series[1].data = [100]
            return draft
        })

        setSevereOptionRatio(draft => {
            draft.series[0].data = [res?.moca[3]?.num / res?.total * 100]
            draft.series[1].data = [100]
            return draft
        })
    }, [res])



    let evaluationChartsRatio = useRef(null)
    let [evaluationOptionRatio, setEvaluationOptionRatio] = useImmer({
        xAxis: {
            show: false,
        },
        yAxis: {
            show: false,
            type: 'category'
        },
        series: [
            // 人数
            {
                type: 'bar',
                data: [50],
                barWidth: 20,
                z: 100,// 层级
                itemStyle: {
                    color: '#FFFFFF',
                    borderRadius: 20
                }
            },
            // 人口
            {
                type: 'bar',
                data: [100],
                barWidth: 20,
                barGap: '-100%',// 向上移
                itemStyle: {
                    color: '#ffffff4a',
                    borderRadius: 20
                }
            }
        ],
        grid: {
            top: 0,
            left: 20,
            bottom: 0,
            right: 60,
        }
    })

    let trainChartsRatio = useRef(null)
    let [trainOptionRatio, setTrainOptionRatio] = useImmer({
        xAxis: {
            show: false,
        },
        yAxis: {
            show: false,
            type: 'category'
        },
        series: [
            // 人数
            {
                type: 'bar',
                data: [58],
                barWidth: 20,
                z: 100,// 层级
                itemStyle: {
                    color: '#FFFFFF',
                    borderRadius: 20
                }
            },
            // 人口
            {
                type: 'bar',
                data: [100],
                barWidth: 20,
                barGap: '-100%',// 向上移
                itemStyle: {
                    color: '#ffffff4a',
                    borderRadius: 20
                }
            }
        ],
        grid: {
            top: 0,
            left: 20,
            bottom: 0,
            right: 60,
        }
    })

    let severeChartsRatio = useRef(null)
    let [severeOptionRatio, setSevereOptionRatio] = useImmer({
        xAxis: {
            show: false,
        },
        yAxis: {
            show: false,
            type: 'category'
        },
        series: [
            // 人数
            {
                type: 'bar',
                data: [58],
                barWidth: 20,
                z: 100,// 层级
                itemStyle: {
                    color: '#FFFFFF',
                    borderRadius: 20
                }
            },
            // 人口
            {
                type: 'bar',
                data: [100],
                barWidth: 20,
                barGap: '-100%',// 向上移
                itemStyle: {
                    color: '#ffffff4a',
                    borderRadius: 20
                }
            }
        ],
        grid: {
            top: 0,
            left: 20,
            bottom: 0,
            right: 60,
        }
    })

    // 测评情况图表
    useEffect(() => {
        const chart = echarts.init(evaluationChartsRatio.current);
        chart.setOption(evaluationOptionRatio);
        return () => chart.dispose(); // 组件卸载时销毁实例
    }, [evaluationOptionRatio]);

    // 训练情况图表
    useEffect(() => {
        const chart = echarts.init(trainChartsRatio.current);
        chart.setOption(trainOptionRatio);
        return () => chart.dispose();
    }, [trainOptionRatio]);

    // 严重情况图表
    useEffect(() => {
        const chart = echarts.init(severeChartsRatio.current);
        chart.setOption(severeOptionRatio);
        return () => chart.dispose();
    }, [severeOptionRatio]);

    return (
        <div className={styles.map_risk_warning_container}>
            <Title titleDescription={'区域性地图+风险预警'}>
                <div className='map-risk-warning-container-annotation'>巴中市</div>
            </Title>
            <div className={styles.content}>
                <div className={styles.population}>
                    <div className={styles.population_title}>人口情况</div>
                    <div className={styles.population_data}>
                        <div className={styles.population_data_old}>老年人口</div>
                        <div className={styles.population_data_number}>{res?.total}人</div>
                    </div>
                </div>
                <div className={styles.evaluation}>
                    <div className={styles.evaluation_title}>测评情况</div>
                    <div className={styles.evaluation_data}>
                        <div className={styles.evaluation_data_old}>老年人口</div>
                        <div className={styles.evaluation_data_number}>{res?.total}人</div>
                    </div>
                    <div className={styles.evaluation_data}>
                        <div className={styles.evaluation_data_old}>测评人数</div>
                        <div className={styles.evaluation_data_number}>{res?.moca?.reduce((prev, current) => prev + current.num, 0)}人</div>
                    </div>
                    <div ref={evaluationChartsRatio} className={styles.evaluation_echart_data_ratio}>

                    </div>
                    <div className={styles.evaluation_data_ratio}>
                        {res && (evaluationOptionRatio?.series[0]?.data[0] / evaluationOptionRatio?.series[1]?.data[0] * 100).toFixed(2)}%
                    </div>
                </div>
                <div className={styles.train}>
                    <div className={styles.train_title}>训练情况</div>
                    <div className={styles.train_data}>
                        <div className={styles.train_data_old}>老年人口</div>
                        <div className={styles.train_data_number}>{res?.total}人</div>
                    </div>
                    <div className={styles.train_data}>
                        <div className={styles.train_data_old}>训练人数</div>
                        <div className={styles.train_data_number}>{res?.total_xl}人</div>
                    </div>
                    <div ref={trainChartsRatio} className={styles.train_echart_data_ratio}>

                    </div>
                    <div className={styles.train_data_ratio}>
                        {res && (trainOptionRatio.series[0].data[0] / trainOptionRatio.series[1].data[0] * 100).toFixed(2)}%
                    </div>
                </div>
                <div className={styles.severe}>
                    <div className={styles.severe_title}>重度预警</div>
                    <div className={styles.severe_data}>
                        <div className={styles.severe_data_old}>老年人口</div>
                        <div className={styles.severe_data_number}>{res?.total}人</div>
                    </div>
                    <div className={styles.severe_data}>
                        <div className={styles.severe_data_old}>重度人数</div>
                        <div className={styles.severe_data_number}>{res?.moca[3]?.num}人</div>
                    </div>
                    <div ref={severeChartsRatio} className={styles.severe_echart_data_ratio}>

                    </div>
                    <div className={styles.severe_data_ratio}>
                        {res && (severeOptionRatio.series[0].data[0] / severeOptionRatio.series[1].data[0] * 100).toFixed(2)}%
                    </div>
                </div>
            </div>
        </div>
    )
}
